<template>
    <bi-form class="shop-model-param" ref="form">
        <bi-icon :loading="loading" v-if="loading" />
        <template v-if="!loading">
            <div  class="no-info" v-if="list.length==0">
                <template v-if="noText==''">
                当前模型未设置参数 <bi-button type="link" @click="$go({app:'shop',controller:'admin.model',action:'index'})">前往设置</bi-button>
                </template>
                <template v-if="noText!=''">
                    {{noText}}
                </template>
            </div>
            <bi-form-item v-for="item in list" :key="item.name"  :label="item.title">
                <component :is="'modelfield-'+item.type" v-model="value[item.name]" v-bind="item.props" :option="item.option"  ></component>
            </bi-form-item>
        </template>
    </bi-form>
</template>

<script>
import modelFieldList from '../model/model-field-list.js';

let components = {};

for(let name in modelFieldList){
    components['modelfield-'+name] = modelFieldList[name].component;
}

export default{
    data()
    {
        return {
            value:{},
            list:[],
            loading:false
        }
    },
    components,
    props:{
        model:{
            type:[String,Number],
            default:''
        },
        data:{
            type:Object,
            default:{}
        },
        noText:{
            type:String,
            default:''
        }
    },
    watch:{
        model(val){
            this.refresh();
        }
    },
    methods:{
        check(){
            if (this.$refs.form.check()){
                return true;
            }else{
                return false;
            }
        },
        getData(){
            return this.value;
        },
        refresh(){
            this.$refs.form.clear();
            if (this.model=='') return ;
            
            this.loading = true;
            this.$ajax({
                url:this.$url({controller:'admin.model',action:'paramList'}),
                data:{
                    model_id:this.model
                },
                success:(res)=>{
                    this.loading = false;
                    this.value= {};
                    res.forEach(element => {
                        let name = element.name;

                        if (modelFieldList[element.type]){
                            let input = modelFieldList[element.type];

                            if (this.data && this.data[name]){
                                this.value[name] = this.data[name];
                            }else{
                                this.value[name] = element.defaultValue;

                                if (this.value[name]=='' && input.defaultValue){
                                    this.value[name] = input.defaultValue;
                                }
                            }

                            for(let name  in element.props){
                                if (element.props[name]=='true' || element.props[name]=='false'){
                                    element.props[name] = element.props[name]=='true'?true:false;
                                }
                            }

                            let required  = false;
                            
                            if (element.required == '1') required  = true;

                            element.props = {
                                required,
                                ...input.props,
                                ...element.props
                            }

                        }
                        
                    });

                    this.list = res;
                }
            });
        }
    },
    mounted()
    {
        this.refresh();
    }
}

</script>


<style>
.shop-model-param .no-info{
    padding: 30px 0px;
    display: flex;
    align-items: center;
}
</style>